<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
            list-style: none;
        }
        #mark{
            float:left;
        }
        #mark img{
            width:50px;
            height:50px;
            border-radius: 50%;
        }
        #box img{
            width: 100%;
            height:400px;
        }
        .tab_list{
            width:100%;
            height:60px;
            background-color: rosybrown;
        }
        .tab_list ul{
            margin-left: 200px;
        }
        .tab_list li{
            float:left;
            height:60px;
            line-height: 55px;
            padding:0 20px;
            text-align:center;
            cursor:pointer;
            list-style: none;
        }
        .tab_list .current{
            background-color: rgb(226, 148, 52);
            color:#fff;
        }
        .item_info{
            padding:20px 0 0 20px;
        }
        .item{
            display:none;
        }
        #line{
            width:70%;
            height:50px;
            margin:0 auto;
            background-color: bisque;
        }
        #line p,#linee p{
            position: absolute;
            margin-left: 20px;
            margin-top:10px;
            font-size: 20px;
        }
        #hotdog,#newdog,#allll{
            width: 70%;
            /* height:800px; */
            margin:0 auto;
            overflow: hidden;
            /* background-color: red; */
        }
        #hot ,#new{
            float:left;
            margin-left: 36px;
            margin-top: 40px;
            width:220px;
            height:280px;
            /* background-color: purple; */
        }
        #hot img,#new img{
            width:220px;
            height:220px; 
        }
        #hot p,#new p{
            font-size: 15px;
            text-align: center;
        }
        #haha{
            background-image: url('../images/default/2.jpg') ;
            background-attachment: fixed;
            background-size: 100% 100%;
	        margin-left: auto;
	        margin-right:auto;
	        width: 100%;
	        height:170px;
            z-index: 0;
        }
        #boxtwo{
            width: 70%;
            height:130px;
            margin:20px auto;
            background-color: rgb(255, 228, 196);
        }
        #boxtwo>#boxtwo-right ul li{
            font-size: 20px;
            float:left;
            margin-left:20px;
        }
        #boxtwo-left,#boxtwo-right{
            float:left;
        }
        #boxtwo-left{
            background-color: rgb(250, 197, 132);
            width:200px;
            height:100%;
        }
        #boxtwo-right{
            margin:20px;
            cursor: pointer;
        }
        #boxtwo-left ul li{
            margin-top: 20px;
            font-size:20px;
            text-align: center;
        }
        #enqinput{
            margin-top: 20px;
            margin-left: 20px;
        }
    
        #enqinput{
            float:left;
            width:260px;
            height: 28px;
            border: none;
            padding:5px;

        }
        .currentt{
            background-color: rgb(226, 148, 52);
            color:white;
        }
        .ccurrent{
            background-color: rgb(250, 197, 132);
            color:white;
        }
        #enq{
            float:left;
            width:80px;
            height: 38px;
            /* margin-left: -3px; */
            background-color: rgb(226, 148, 52);
            border-color:rgb(226, 148, 52) ;
            color:white;
            font-size: 20px;
            margin-top: 20px;
        }
        #enq:hover{
            color:rgb(226, 148, 52) ;
            background-color: white;
            color:rgb(226, 148, 52) ;

        }
        #alldog{
            width:70%;
            overflow: hidden;
            /* height:400px; */
            background-color: rgb(250, 241, 229);
            margin:-20px auto;
        }
        #alldog ul li{
            float:left;
            margin:10px;
        }
        #alldog button{
            margin:5px;
            width:60px;
            height:25px;
            border:none;
            background-color: rgb(250, 197, 132);
        }
        #heart{
            width:70%;
            overflow: hidden;
            /* height:400px; */
            background-color: rgb(250, 241, 229);
            margin:0 auto;
        }
        #heart>p{
            margin:10px;
            font-size:20px;
        }
        #user{
            margin:0 auto;
            width:70%;
            font-size:17px;
            /* height:200px; */
            overflow: hidden;
            background-color: rgb(250, 241, 229);
        }
        #linee{
            width:100%;
            height:50px;
            margin:0 auto;
            background-color: bisque;
        }
        #lll{
            width:80%;
            height:1px;
            background-color: rgba(68, 67, 67, 0.322);
        }
        #address{
            width:70%;
            height:100px;
            /* margin:0 auto; */
            margin:20px;
            padding:20px;
            background-color: rgb(250, 197, 132);
        }
        #information{
            padding:20px;
        }
        #oldadd{
            margin:10px;
        }
        #address button{
            float:right;
        }
        #pawo{
            margin:20px;
        }
        #user #submit{
            float:right;
            margin:50px;
        }
        #heartpk{
            background-color: rgb(252, 122, 144);
            width:70%;
            height:200px;
            margin:20px auto;
        }
        #heartpk>h1,#heartpk>h2,#heartpk>h3{
            padding:10px;
        }

        table{
            margin:20px auto;
            background-color:  rgb(250, 197, 132);
            width: 1000px;
            height:300px;
            text-align: center;
        }
        table>td{
            color:black;
        }

        #xian{
            width:80%;
            height:1px;
            float:left;
            background-color: rgba(68, 67, 67, 0.322);
        }
        .orderbox{
            width:70%;
            overflow: hidden;
            background-color: rgb(255, 228, 196);
            margin:0 auto;
        }
        .order li {
            float:left;
            padding:20px;
        }
        .itemm{
            float:left;
            width:100%;
            overflow: hidden;
        }
        #order-all,#order-no,#order-have,#order-go{
            width:90%;
            height:100px;
            /* margin:0 auto; */
            margin:20px;
            padding:20px;
            background-color: rgb(250, 197, 132);
        }
        #order-all img,
        #order-no img,
        #order-have img,
        #order-go img{
            width:100px;
            height:100px;
            float:left;
        }
        #orderall,#orderno,#orderhave,#ordergo{
            margin-left:50px;
            /* width:100px; */
            float:left;
        }
        #orderall-btn button,#orderno-btn button,#orderhave-btn button,#ordergo-btn button{
            /* float:right; */
            margin-left:500px;
            /* width:50px; */
            margin-bottom: 5px;

            /* background-color: red; */
        }
        


</style>
        
    
</head>
<body>
    <div class="tab">
        <div class="tab_list">
            <div id="mark">
                <img src="../images/dog.jpg" style="float:left;margin-top:5px;margin-left: 10px;" alt="">
                <p style="float:left;margin-top: 17px;font-size: 20px;margin-left: 10px;">Pet Shop</p>
            </div>
            <ul>
                <li class="current" >首页</li>
                <li>商品分类</li>
                <li>爱心领养💗</li>
                <li>购物车</li>
                <li>我的订单</li>
                <li>个人中心</li>
            </ul>
        </div>
        <div class="tab_con">
            <!-- 1 -->
            <div class="item" style="display:block;" > 
                <div id="box">
                    <img src="../images/default/1.jpg" alt="">
                </div>

                <div id="line">
                    <p>热销宠物</p>
                </div>

                <div id="hotdog">
                    <div id="hot">
                        <a href="wb.html">
                            <img src="../images/dog.jpg" alt="">
                        </a>
                        <p>柯基</p>
                        <p>$111</p>
                    </div>
                    <div id="hot">
                        <a href="wb.html">
                            <img src="../images/dog.jpg" alt="">
                        </a>
                        <p>柯基</p>
                        <p>$111</p>
                    </div>
                    <div id="hot">
                        <a href="wb.html">
                            <img src="../images/dog.jpg" alt="">
                        </a>
                        <p>柯基</p>
                        <p>$111</p>
                    </div>
                    <div id="hot">
                        <a href="wb.html">
                            <img src="../images/dog.jpg" alt="">
                        </a>
                        <p>柯基</p>
                        <p>$111</p>
                    </div>
                    <div id="hot">
                        <a href="wb.html">
                            <img src="../images/dog.jpg" alt="">
                        </a>
                        <p>柯基</p>
                        <p>$111</p>
                    </div>
                </div>

                <div id="line" style="background-color: rgb(150, 219, 221);">
                    <p>新品推荐</p>
                </div>

                <div id="newdog">
                    <div id="new">
                        <a href="wb.html">
                            <img src="../images/dog.jpg" alt="">
                        </a>
                        <p>柯基</p>
                        <p>$111</p>
                    </div>
        
                    <div id="new">
                        <a href="wb.html">
                            <img src="../images/dog.jpg" alt="">
                        </a>
                        <p>柯基</p>
                        <p>$111</p>
                    </div>
        
                    <div id="new">
                        <a href="wb.html">
                            <img src="../images/dog.jpg" alt="">
                        </a>
                        <p>柯基</p>
                        <p>$111</p>
                    </div>
                    <div id="new">
                        <a href="wb.html">
                            <img src="../images/dog.jpg" alt="">
                        </a>
                        <p>柯基</p>
                        <p>$111</p>
                    </div>  
                    <div id="new">
                        <a href="wb.html">
                            <img src="../images/dog.jpg" alt="">
                        </a>
                        <p>柯基</p>
                        <p>$111</p>
                    </div> 
                </div>
                <div id="line" style="margin-top: 10px;background-color:pink; ">
                <p>今日爱心排行榜</p></div>
                <div id="heartpk">
                    <h1>1、岳佳佳----------------100💗</h1>
                    <h2>2、宋甜甜----------------99💗</h2>
                    <h3>3、佩奇------------------98💗</h3>
                </div>
            </div>


            <!-- 2 -->
            <div class="item">
                
                <div id="boxtwo">
                    <div id="boxtwo-left">
                        <ul>
                            <li>选择类别</li>
                            <li>搜索</li>
                        </ul>
                    </div>
                    <div id="boxtwo-right">
                        <ul id="lei">
                            <li class="currentt">小型犬</li>
                            <li>中型犬</li>
                            <li>大型犬</li>
                            <li>咪咪</li>
                        </ul>
                        <input type="text" id="enqinput" placeholder="例如：泰迪棕色/比熊/暹罗猫">
                        <button id="enq">搜索</button>
                    </div>
                </div>
                <div id="alldog">
                    <button>综合</button>
                    <button>价格🔺</button>
                    <button>价格🔻</button>
                    <div id="allll"></div>
                        <div id="hot">
                            <a href="wb.html">
                                <img src="../images/dog.jpg" alt="">
                            </a>
                            <p>柯基</p>
                            <p>$111</p>
                        </div>
                        <div id="hot">
                            <a href="wb.html">
                                <img src="../images/dog.jpg" alt="">
                            </a>
                            <p>柯基</p>
                            <p>$111</p>
                        </div>
                        <div id="hot">
                            <a href="wb.html">
                                <img src="../images/dog.jpg" alt="">
                            </a>
                            <p>柯基</p>
                            <p>$111</p>
                        </div>
                        <div id="hot">
                            <a href="wb.html">
                                <img src="../images/dog.jpg" alt="">
                            </a>
                            <p>柯基</p>
                            <p>$111</p>
                        </div>
                        <div id="hot">
                            <a href="wb.html">
                                <img src="../images/dog.jpg" alt="">
                            </a>
                            <p>柯基</p>
                            <p>$111</p>
                        </div>
                        
                        

                    </div>
                </div>
            </div>


            <!-- 3 -->
            <div class="item">
                <div id="heart">
                    <p>活着是我流浪的目的</p>
                    <p>却不是我流浪的原因</p>
                    <p>在繁华城市中寻找来之不易的食物</p>
                    <p>是脏的、是臭的、烂的，也要吃下去</p>
                    <p>我等待着再一次的温暖</p>
                    <p>期待一份饱餐…</p>
                </div>
                <div id="haha"></div>
                <div id="heart">
                    <div id="new">
                        <a href="wb.html">
                            <img src="../images/dog.jpg" alt="">
                        </a>
                        <p>柯基</p>
                        <p>$1</p>
                    </div>
                    <div id="hot">
                        <a href="wb.html">
                            <img src="../images/dog.jpg" alt="">
                        </a>
                        <p>柯基</p>
                        <p>$1</p>
                    </div>
                    <div id="hot">
                        <a href="wb.html">
                            <img src="../images/dog.jpg" alt="">
                        </a>
                        <p>柯基</p>
                        <p>$1</p>
                    </div>
                    <div id="hot">
                        <a href="wb.html">
                            <img src="../images/dog.jpg" alt="">
                        </a>
                        <p>柯基</p>
                        <p>$1</p>
                    </div>
                    <div id="hot">
                        <a href="wb.html">
                            <img src="../images/dog.jpg" alt="">
                        </a>
                        <p>柯基</p>
                        <p>$1</p>
                    </div>
                    <div id="hot">
                        <a href="wb.html">
                            <img src="../images/dog.jpg" alt="">
                        </a>
                        <p>柯基</p>
                        <p>$1</p>
                    </div>
                </div>
            </div>


            <!-- 4 -->
            <div class="item">
                <table id="ttable">
                    <tr>
                        <td><input type="button" name="checkall" id="checkall" value="全选" style="width: 50px;"></td>
                        <td>序号</td>
                        <td>名称</td>
                        <td>价钱</td>
                        <td>数量</td>
                        <td>小计</td>
                    </tr>
                    <tr>
                        <td><input type="checkbox" name="items"></td>
                        <td>1</td>
                        <td>XXX</td>
                        <td>
                            <span class="price">79</span>￥</td>
                        <td>
                            <button class="left">-</button>
                            <input type="text" class="text" id="shopone" value="0" />
                            <button class="right">+</button></td>
                        <td>
                            <span class="smallprice" id="shop1">0</span>￥</td>
                    </tr>
                    <tr>
                        <td><input type="checkbox" name="items"></td>
                        <td>2</td>
                        <td>XXXXX</td>
                        <td><span class="price">100</span>￥</td>
                        <td><button class="left">-</button>
                            <input type="text" id="shoptwo" class="text" value="0" />
                            <button class="right">+</button>
                        </td>
                        <td><span class="smallprice" id="shop2">0</span>￥</td>
                    </tr>
                    <tr>
                        <td><input type="checkbox" name="items"></td>
                        <td>3</td>
                        <td>XXXXX</td>
                        <td><span class="price">170</span>￥</td>
                        <td>
                            <button class="left">-</button>
                            <input type="text" class="text" id="shopthree" value="0" />
                            <button class="right">+</button></td>
                        <td><span class="smallprice" id="shop3">0</span>￥</td>
                    </tr>
                    <tr>
                        <td>总计：</td>
                        <td colspan="6"><b class="totle">0</b>￥</td>
                    </tr>
                </table>
            </div>
            <!-- 5 -->
            <div class="item">
                <div class="orderbox">
                    <div class="order">
                        <ul>
                            <li class="ccurrent">全部&nbsp;(100)</li>
                            <li>未支付&nbsp;(0)</li>
                            <li>配送中&nbsp;(99)</li>
                            <li>已完成&nbsp;(1)</li>
                        </ul>
                    </div>
                    <div id="xian"></div>
                    <div id="order-con">
                        <!-- 全部 -->
                        <div class="itemm" style="display:block;" > 
                            
                            <div id="order-all">
                                <img src="../images/dog.jpg" alt="">
                                <div id="orderall">
                                    <p>【！狂欢价！】</p>
                                    <h3>$700</h3>
                                    <p>可爱的短腿柯基棕色！！！</p>
                                </div>
                                <div id="orderall-btn">
                                    <button>111111</button><br>
                                    <button>22222222</button><br>
                                    <button>33333333</button>
                                </div>
                            </div>
                            
                            
                        </div>
                        <!-- 未支付 -->
                        <div class="itemm" style="display:none;" > 
                            
                            <div id="order-no">
                                <img src="../images/dog.jpg" alt="">
                                <div id="orderno">
                                    <p>【！狂欢价！】</p>
                                    <h3>$1000</h3>
                                    <p>可爱的短腿柯基棕色！！！</p>
                                </div>
                                <div id="orderno-btn">
                                    <button>取消订单</button><br>
                                    <button id="changeaddress"><a href="changeaddress.html">修改地址</a></button><br>
                                    <button>去支付</button>
                                </div>
                            </div>
                            
                        </div>
                        <!-- 配送中 -->
                        <div class="itemm" style="display:none;">

                            <div id="order-go">
                                <img src="../images/dog.jpg" alt="">
                                <div id="ordergo">
                                    <p>【！狂欢价！】</p>
                                    <h3>$300</h3>
                                    <p>可爱的短腿柯基棕色！！！</p>
                                </div>
                                <div id="ordergo-btn">
                                    <button>退货退款</button><br>
                                    <button id="changeaddress"><a href="changeaddress.html">修改地址</a></button><br>
                                    <button>确认收货</button>
                                </div>
                            </div>
                            <div id="order-go">
                                <img src="../images/dog.jpg" alt="">
                                <div id="ordergo">
                                    <p>【！狂欢价！】</p>
                                    <h3>$300</h3>
                                    <p>可爱的短腿柯基棕色！！！</p>
                                </div>
                                <div id="ordergo-btn">
                                    <button>退货退款</button><br>
                                    <button id="changeaddress"><a href="changeaddress.html">修改地址</a></button><br>
                                    <button>确认收货</button>
                                </div>
                            </div>
                            

                        </div>
                        <!-- 已收货 -->
                        <div class="itemm" style="display:none;">

                            <div id="order-have">
                                <img src="../images/dog.jpg" alt="">
                                <div id="orderhave">
                                    <p>【！狂欢价！】</p>
                                    <h3>$400</h3>
                                    <p>可爱的短腿柯基棕色！！！</p>
                                </div>
                                <div id="orderhave-btn">
                                    <button>确认订单</button><br>
                                    <!-- <button>22222222</button><br> -->
                                </div>
                            </div>

                        </div>
                        
                    </div>
                </div>
            </div>
        
            <div class="item">
                <div id="user">
                    <div id="linee"><p>个人信息</p></div>
                    <div id="information">
                        <p>用户名：<input type="text"></p>
                        <p>手机号：<input type="text"></p>
                    </div>
                        
                    <div id="linee"><p>我的地址</p></div>
                    <div id="information">
                        <p>我的收货地址：</p>
                        <div id="address">
                            <h3>温朴直</h3>
                            <p>18066926770</p>
                            <p>段慧敏家</p>
                            <div id="lll"></div>
                            <input type="radio" name="add" id="oldadd">默认地址

                            <button>删除地址</button>
                        </div>
                        <div id="address">
                            <h3>宋甜甜</h3>
                            <p>17602967415</p>
                            <p>陕西省西安市长安区郭杜街道西安邮电大学</p>
                            <div id="lll"></div>
                            <input type="radio" name="add" id="oldadd">默认地址

                            <button>删除地址</button>
                        </div>
                        <div id="address">
                            <h3>佩奇</h3>
                            <p>17602967415</p>
                            <p>陕西省西安市长安区郭杜街道西安邮电大学</p>
                            <div id="lll"></div>
                            <input type="radio" name="add" id="oldadd">默认地址
                            <button>删除地址</button>
                        </div>
                        <p>添加新的收货地址：<br>
                            姓名：<input type="text">
                            电话：<input type="text"><br>
                            <input type="text">省
                            <input type="text">市<br>
                            详细地址<input type="text"><br>
                            <button>添加</button>
                        </p>
                    </div>
                    <div id="linee"><p>修改密码</p></div>
                    <div id="pawo">
                        <p>输入旧密码：<input type="password"></p>
                        <p>输入新密码：<input type="password" id="password"></p>
                        <p>确认新密码：<input type="password" id="password2" onkeyup="jud()"></p>
                        <div id="add"></div>
                    </div>
                    <button id ="submit">修改完成</button>
                </div>  
            </div>
        </div>
    </div>
    <div style="background-color:rosybrown;width:100%;
        height:100px;margin-top:50px;"></div>
</body>
<script>


       
        var list = document.querySelector('.tab_list')
        var lis = list.querySelectorAll('li');
        var items = document.querySelectorAll('.item');

        for(var i = 0;i<lis.length;i++){
            lis[i].setAttribute('index',i);
            lis[i].onclick = function (){
                for(var i =0;i<lis.length;i++){
                    lis[i].className = '';
                }
                this.className = 'current';
                var index = this.getAttribute('index');
                for(var i = 0;i<items.length;i++){
                    items[i].style.display = 'none';
                }
                items[index].style.display = 'block';
            }
        }

        var lili = document.getElementById('lei').querySelectorAll('li');
        for(var i = 0;i<lili.length;i++){
            lili[i].onclick = function (){
                for(var i =0;i<lili.length;i++){
                    lili[i].className = '';
                }
                this.className = 'currentt';
            }
        }


        var password = document.getElementById('password');
        var password2 = document.getElementById('password2');
        function jud() {
            if(password.value == password2.value) {
                document.getElementById("add").innerHTML="<font color='green'>两次密码相同</font>";
                }else {
                document.getElementById("add").innerHTML="<font color='red'>两次密码不相同，请重新输入</font>";
                }
            }    




        var smallprice = document.getElementsByClassName('smallprice');
        var text = document.getElementsByClassName('text');
        var price = document.getElementsByClassName('price');
        var left = document.getElementsByClassName('left');
        var right = document.getElementsByClassName('right');
        var checkall = document.getElementById('checkall');
        var checkElements = document.getElementsByName('items');
        var totle = document.getElementsByClassName('totle');
        var totleprice = 0;

        var shopone = document.getElementById("shopone");
        var shoptwo = document.getElementById("shoptwo");
        var shopthree = document.getElementById("shopthree");
  
        var shop1 = document.getElementById("shop1");
        var shop2 = document.getElementById("shop2");
        var shop3 = document.getElementById("shop3");


        shopone.value = localStorage.getItem("shopone");
        shoptwo.value = localStorage.getItem("shoptwo");
        shopthree.value = localStorage.getItem("shopthree");

        shop1.innerHTML = localStorage.getItem("shop1");
        shop2.innerHTML = localStorage.getItem("shop2");
        shop3.innerHTML = localStorage.getItem("shop3");



        //+-
        for (var i = 0; i < left.length; i++) {
            left[i].index = i;
            left[i].onclick = function() {
                var value = text[this.index].value;
                value--;
                if (value <= 0) {
                    value = 0;
                }
                text[this.index].value = value;
                addprice(this.index); 
            }
            right[i].index = i;
            right[i].onclick = function() {
                 var value = text[this.index].value;
                 value++;
                 text[this.index].value = value;
                 addprice(this.index);
            }
            checkElements[i].onclick = function() {
                showtotleprice();
            }
        }
        
        //全选
        var a = 0;
        checkall.onclick = function() {
            a++;
            if (a % 2 == 0) {
                for(var i = 0; i < checkElements.length; i++) {
		            var checkElement = checkElements[i];
		            checkElement.checked = false;
                }
            }
            else{
                for(var i = 0; i < checkElements.length; i++) {
		            var checkElement = checkElements[i];
		            checkElement.checked = "checked";
                }
            }
		    
            showtotleprice();
        }
       

        //计算小计
        function addprice(index) {
            smallprice[index].innerText = (price[index].innerText * text[index].value);
        }
        //计算总计
        setInterval(function showtotleprice() {
            totleprice = 0;
            for (var i = 0; i < smallprice.length; i++) {
                if (checkElements[i].checked == true) {
                    totleprice += parseFloat(smallprice[i].innerText);
                    
                }
            }
            totle[0].innerText = totleprice;
        },1000);

        var  orderbox= document.querySelector('.orderbox');
        var lilili = orderbox.querySelectorAll('li');
        var itemm = document.querySelectorAll('.itemm');

        for(var i = 0;i<lilili.length;i++){
            lilili[i].setAttribute('index',i);
            lilili[i].onclick = function (){
                for(var i =0;i<lilili.length;i++){
                    lilili[i].className = '';
                }
                this.className = 'ccurrent';
                var index = this.getAttribute('index');
                for(var i = 0;i<itemm.length;i++){
                    itemm[i].style.display = 'none';
                }
                itemm[index].style.display = 'block';
            }
        }
        




















      
    </script>
</html>